{% load static %}
<!DOCTYPE html>
<html lang='en'>
<head>
	<title>{% block title %}首页{% endblock %}-Wakyde Blog</title>
    <meta charset='utf-8'>
	<meta name='viewport' content='width=device-width, initial-scale=1.0,
    shrink-to-fit=no'>
	<link rel='stylesheet' href='{% static 'css/bootstrap.css' %}'>
    <style>
        .post {
            margin-bottom: 5px;
        }
    </style>
    {% block extra_head %}
    {% endblock %}
</head>
<body>
	<div class='container head'>
        <nav class='navbar navbar-expand-lg navbar-light bg-light'>
            <a class='navbar-brand' href='#'>首页</a>
            <div class='collapse navbar-collapse' id='navbarSupportedContent'>
                <ul class='navbar-nav mr-auto'>
			{% for cate in navs %}
                    <li class='nav-item'>
			    <a class='nav-link' href='{% url 'category-list' cate.id %}'>{{ cate.name }}</a>
                    </li>
		    {% endfor %}
                </ul>
                <form class='form-inline my-2 my-lg-0' action='/search/' method='GET'>
                    <input class='form-control mr-sm-2' type='search' name='keyword'
		    placeholder='Search' aria-label='Search' value='{{ keyword }}'>
                    <button class='btn btn-outline-success'
                        type='submit'>搜索</button>
                </form>
            </div>
        </nav>
        <div class='jumbotron'>
            <h1 class='display-4'>Wakyde</h1>
            <p class='lead'>基于Django的多人博客系统</p>
        </div>
    </div>
    <div class='container main'>
        <div class='row'>
            <div class='col-9 post-list'>
		    {% block main %}
		    {% endblock %}
            </div>
            <div class='col-3'>
		    {% block sidebar %}
		    	{% for sidebar in sidebars %}
                <div class='card sidebar'>
                    <div class='card-body'>
			    <h4 class='card-title'>{{ sidebar.title }}</h4>
                        <p>
			{{ sidebar.content_html }}
                        </p>
                    </div>
                </div>
			{% endfor %}
	            {% endblock %}
            </div>
	
	    {% block footer %}
            <footer class='footer'>
                <div class='container'>
                    <hr/>
                    <nav class='nav category'>
			{% for category in categories %}
			<a href='{% url 'category-list' category.id %}' class='nav-link'>{{ category.name }}</a>
			{% endfor %}
                    </nav>
                </div>
                <div class='container power'>
                    <span class='text-muted'>Power by blog@wakyde</span>
                </div>
            </footer>
	    {% endblock %}

</body>
</html>
